<template>
  <div class="canvasBox">
    <canvas id="canvas"></canvas>
  </div>
</template>

<script lang="ts">
import { ReadImageAll } from "@/mota/data/ImageLoader";
import Mota from "@/mota";
import { Component, Vue } from "vue-property-decorator";

@Component({
  name: "ImageLoadTest",
})
export default class ImageLoadTest extends Vue {
  private mota!: Mota;

  private async created(): Promise<void> {
    await ReadImageAll();
    this.mota = new Mota(document.querySelector("canvas") as HTMLCanvasElement);
  }

  private destroyed(): void {
    this.mota.player.Stop().then();
    this.mota.Destroyed();
  }
}
</script>

<style lang="scss">
.canvasBox {
  width: 100%;
  height: 100%;
  canvas {
    width: 100%;
    height: 100%;
  }
}
#btn_Share {
  display: none;
}
@font-face {
  font-family: "Mota";
  src: url("../style/Word.ttf");
}
</style>
